<template>
  <div>
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <div class="table-box">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        max-height="490"
        ref="table"
      >
        <el-table-column type="index" width="60" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="消息类型"
          prop="messageTemplateAlias"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span>
              {{
                scope.row.messageTemplateAlias
                  | filterName('operation_message_template_alias')
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="消息名称"
          prop="name"
          width="250"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发送用户"
          prop="userType"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.userType | filterName('notice_user_type') }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="发送渠道"
          prop="sendTypesDesc"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="发送状态"
          prop="status"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span> {{ scope.row.status | filterName('send_status') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="发送数量"
          prop="sendCounts"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发送成功数量"
          prop="successCounts"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发送时间"
          prop="sendDate"
          width="150"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createdTime"
          width="150"
        ></el-table-column>
        <el-table-column label="创建人" prop="userName" width="150">
          <template slot-scope="scope">
            <span> {{ scope.row.userName ? scope.row.userName : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetail(scope.row)">
              详情
            </el-button>
            <el-button
              type="text"
              @click="withdraw(scope.row)"
              v-if="
                (scope.row.status == 'SENT' &&
                  scope.row.sendTypes.indexOf('NOTICE') != -1) ||
                  (scope.row.status == 'SENDING' &&
                    scope.row.sendTypes.indexOf('NOTICE') !== -1) ||
                  (scope.row.status == 'SENT' &&
                    scope.row.sendTypes.indexOf('BOMB_SCREEN') !== -1) ||
                  (scope.row.status == 'SENDING' &&
                    scope.row.sendTypes.indexOf('BOMB_SCREEN') !== -1)
              "
            >
              撤回
            </el-button>
            <el-button
              type="text"
              @click="compile(scope.row)"
              v-if="
                scope.row.status == 'UNSENT' ||
                  scope.row.status == 'SUSPENSION' ||
                  scope.row.status == 'WITHDRAWN'
              "
            >
              编辑
            </el-button>
            <el-button
              type="text"
              @click="reStart(scope.row)"
              v-if="scope.row.status == 'SUSPENSION'"
            >
              重启
            </el-button>
            <el-button
              type="text"
              @click="stop(scope.row)"
              v-if="scope.row.status == 'UNSENT'"
            >
              暂停
            </el-button>
            <el-button
              type="text"
              @click="quit(scope.row)"
              v-if="
                scope.row.status == 'UNSENT' || scope.row.status == 'SENDING'
              "
            >
              终止
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import { tasksList, changeStatus, withdrawCompileOperation } from '@/api/notice'
import topSearch from '@component/messageManagement/message/topSearch' // 上部搜索条件
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  msg: '运营消息列表',
  mixins: [saveScrollMixins],
  components: {
    topSearch
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 搜索条件
      formInline: {
        endDate: '', // 创建结束时间
        messageTemplateAlias: '', // 消息类型
        name: '', // 任务名称
        sendType: '', // 发送渠道
        startDate: '', // 创建开始时间
        status: '', // 发送状态
        userType: '' // 发送用户
      },
      checkDialogData: {
        isShow: false,
        params: '',
        type: ''
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  created() {},
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    // 点击编辑
    compile(val) {
      if (val.messageTemplateAlias == 'PERIOD_OF_SERVICE_MESSAGE_TEMPLATE') {
        this.$router.push({
          name: 'wh:serverTemplate',
          query: { id: val.id }
        })
      }
      if (val.messageTemplateAlias == 'OPERATION_MESSAGE_TEMPLATE') {
        this.$router.push({
          name: 'wh:operationTemplate',
          query: { id: val.id }
        })
      }
      if (val.messageTemplateAlias == 'TARGETED_MESSAGE_TEMPLATE') {
        this.$router.push({
          name: 'wh:fixedMessage',
          query: { id: val.id }
        })
      }
    },
    // 点击终止
    quit(val) {
      let obj = {
        statusOperate: 'ABORT',
        isQueryString: true
      }
      let id = val.id
      var _this = this
      changeStatus(
        id,
        obj,
        (res) => {
          _this.$message({
            message: '终止成功',
            type: 'warning'
          })
          _this.searchList()
        },
        (err) => {}
      )
    },
    // 点击暂停
    stop(val) {
      let obj = {
        statusOperate: 'SUSPENSION',
        isQueryString: true
      }
      let id = val.id
      var _this = this
      changeStatus(
        id,
        obj,
        (res) => {
          this.$message({
            message: '暂停成功',
            type: 'success'
          })
          _this.searchList()
        },
        (err) => {}
      )
    },
    // 点击重启
    reStart(val) {
      let obj = {
        statusOperate: 'RESTART',
        isQueryString: true
      }
      let id = val.id
      var _this = this
      changeStatus(
        id,
        obj,
        (res) => {
          this.$message({
            message: '重启成功',
            type: 'warning'
          })
          _this.searchList()
        },
        (err) => {}
      )
    },
    /*撤回 发送中或者已发送的消息*/
    withdraw(val) {
      let obj = {
        status: 'RECALL'
      }
      let id = val.id
      var _this = this
      withdrawCompileOperation(
        id,
        obj,
        (res) => {
          _this.$message({
            message: '撤回成功',
            type: 'success'
          })
          _this.searchList()
        },
        (err) => {
          _this.$message({
            message: '撤回失败',
            type: 'warning'
          })
          _this.searchList()
        }
      )
    },
    filterName(id, name) {
      let obj = this.$store.state['valueTokey'][name]
      if (id && obj && obj[id]) {
        return obj[id].name
      }
      return ''
    },
    toDetail(row) {
      if (row.messageTemplateAlias === 'TARGETED_MESSAGE_TEMPLATE') {
        this.$router.push({
          name: 'wh:fixedMessage:detail',
          query: { id: row.id }
        })
      } else {
        this.$router.push({
          name: 'wh:messageDetail',
          query: { id: row.id }
        })
      }
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = { ...this.searchParams, ...this.formInline }
      delete params.createTime
      tasksList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
          this.tableData.forEach((item) => {
            item.sendTypesDesc = item.sendTypesDesc.join(',')
          })
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.searchList()
    }
  }
}
</script>

<style lang="less" scoped></style>
